<template>
    <div>
     <div class="search">
      <input  v-model="keyword" type="text" class="search-input" placeholder="输入城市名或拼音"> 
      
     </div>
     <div class="search-content" ref="search" v-show="keyword">
      <ul>
          <li @click="cityclick(item.name)" class="search-item border-bottom" v-for="item of list" :key="item.index">{{item.name}}</li>
          <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
      </ul>
     </div>
    </div>
    
</template>

<script>
    import  Bscroll from 'better-scroll'
    import {mapMutations} from 'vuex'
    export default {
        name:"CitySearch",
        props:{
            cities:Object,
        },
          methods:{
           cityclick(city){

               
               this.changecity(city)
               this.$router.push('/')
            },
            ...mapMutations(['changecity'])
        },
        computed:{
            hasNoData(){
                return !this.list.length
            }
        },
        data(){
            return{
                keyword:'',
                list:[],
               
            }
        },
        mounted(){
        this.scroll=new Bscroll(this.$refs.search)


        },
        watch:{
        keyword(){
        if(!this.keyword){
         this.list=[]
         return    
        }    
        setTimeout(()=>{
         const result =[]
         for(let i in this.cities){
           this.cities[i].forEach((value)=>{
           if(value.spell.indexOf(this.keyword)>-1||
            value.name.indexOf(this.keyword)>-1
           ){
              result.push(value)

           } 
            

           })   
        

         }



          this.list=result

          },100)
        


          

            }
        }
        
    }
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.search
   height .72rem
   padding 0 .1rem
   background-color $bgcolor
  .search-input
     box-sizing border-box
     height  .62rem
     line-height .62rem
     width 100% 
     text-align center
     border-radius .06rem
     color #888
     padding 0 .2rem
.search-content
   overflow hidden
   z-index 1
   position absolute
   top 1.58rem
   bottom 0
   left 0
   right 0
   background-color #eee
  .search-item
     line-height  .62rem
     padding-left  .2rem
     color #666 
     background-color  #fff    
</style>